<template>
  <div v-if="!isLoading"
       style="align-self: center;justify-items: center">
  <h1>资源申请信息</h1>

  <el-form ref="form" :model="proInfo" label-position="left" label-width="80px"
           style="margin-left:10%;width: 80%;align-self: center">
    <el-form-item label="功能名称">
      <el-input disabled v-model="proInfo.pro_name"/>
    </el-form-item>

    <el-radio-group v-model="radio_select">
      <el-radio :label="null">显示全部</el-radio>
      <el-radio :label="'0'">当前可用</el-radio>
      <el-radio :label="'1'">当前不可用</el-radio>
      <el-radio :label="'2'">暂时不可用</el-radio>
    </el-radio-group>

    <el-card class="display-card">
      <template #header>
        实验药品申请信息
      </template>
      <template v-for="(res) in proInfo.drug_info">
      <el-form-item
          :label="res.name"
          :key="res.key"
          style="flex: 1"
          v-if="(radio_select==null)||(radio_select===res.app_status)">
        <el-col :span="4">
          需求数量:&nbsp;&nbsp;&nbsp;{{ res.need_num}}
        </el-col>

        <el-col :span="10" :offset="1">
          <el-radio-group :fill="radio_color[res.app_status]" v-model="res.app_status" disabled text-color="black">
            <el-radio-button border label="0">当前可用</el-radio-button>
            <el-radio-button border label="1">当前不可用</el-radio-button>
            <el-radio-button border label="2">暂时不可用</el-radio-button>
          </el-radio-group>
        </el-col>

        <span v-if="res.app_status==='2'">
          <el-col :span="2" :offset="1">
            可用时间:&nbsp;&nbsp;&nbsp;
          </el-col>
          <el-col :span="4">
            <el-date-picker type="date"
                            placeholder="选择日期"
                            v-model="res.available_time1"
                            style="width: 100%;" disabled/>
          </el-col>
          <el-col class="line" :span="2">-</el-col>
          <el-col :span="4">
            <el-time-picker
                placeholder="选择时间"
                v-model="res.available_time2"
                style="width: 100%;" disabled/>
          </el-col>
        </span>
      </el-form-item>
      </template>
    </el-card>


    <el-card class="display-card">
      <template #header>
        实验器材申请信息
      </template>
      <template v-for="(res) in proInfo.equ_info">


      <el-form-item

          :label="res.name"
          :key="res.key"
          style="flex: 1"
          v-if="(radio_select==null)||(radio_select===res.app_status)">
        <el-col :span="4">
          需求数量:&nbsp;&nbsp;&nbsp;{{ res.need_num}}
        </el-col>

        <el-col :span="10" :offset="1">
          <el-radio-group :fill="radio_color[res.app_status]" v-model="res.app_status" disabled text-color="black">
            <el-radio-button border label="0">当前可用</el-radio-button>
            <el-radio-button border label="1">当前不可用</el-radio-button>
            <el-radio-button border label="2">暂时不可用</el-radio-button>
          </el-radio-group>
        </el-col>

        <span v-if="res.app_status==='2'">
          <el-col :span="2" :offset="1">
            可用时间:&nbsp;&nbsp;&nbsp;
          </el-col>
          <el-col :span="4">
            <el-date-picker type="date"
                            placeholder="选择日期"
                            v-model="res.available_time1"
                            style="width: 100%;" disabled/>
          </el-col>
          <el-col class="line" :span="2">-</el-col>
          <el-col :span="4">
            <el-time-picker placeholder="选择时间"
                            v-model="res.available_time2"
                            style="width: 100%;" disabled/>
          </el-col>
        </span>
      </el-form-item>
      </template>
    </el-card>


    <el-card class="display-card">
      <template #header>
        实验动物申请信息
      </template>
      <template  v-for="(res) in proInfo.animal_info">

      <el-form-item
          :label="res.name"
          :key="res.key"
          style="flex: 1"
          v-if="(radio_select==null)||(radio_select===res.app_status)">

        <el-col :span="4">
          需求数量:&nbsp;&nbsp;&nbsp;{{ res.need_num}}
        </el-col>

        <el-col :span="10" :offset="1">
          <el-radio-group
              :fill="radio_color[res.app_status]"
              v-model="res.app_status"
              disabled text-color="black">
            <el-radio-button border label="0">当前可用</el-radio-button>
            <el-radio-button border label="1">当前不可用</el-radio-button>
            <el-radio-button border label="2">暂时不可用</el-radio-button>
          </el-radio-group>
        </el-col>

        <span v-if="res.app_status==='2'">
          <el-col :span="2" :offset="1">
            可用时间:&nbsp;&nbsp;&nbsp;
          </el-col>
          <el-col :span="4">
            <el-date-picker type="date"
                            placeholder="选择日期"
                            v-model="res.available_time1"
                            style="width: 100%;" disabled/>
          </el-col>
          <el-col class="line" :span="2">-</el-col>
          <el-col :span="4">
            <el-time-picker placeholder="选择时间"
                            v-model="res.available_time2"
                            style="width: 100%;" disabled/>
          </el-col>
        </span>
      </el-form-item>
      </template>
    </el-card>

    <el-card class="display-card">
      <template #header>
        生物样本申请信息
      </template>
      <template v-for="(res) in proInfo.sample_info">
      <el-form-item

          :label="res.name"
          :key="res.key"
          style="flex: 1"
          v-if="(radio_select==null)||(radio_select===res.app_status)">

        <el-col :span="4">
          需求数量:&nbsp;&nbsp;&nbsp;{{ res.need_num}}
        </el-col>

        <el-col :span="10" :offset="1">
          <el-radio-group
              v-model="res.app_status"
              :fill="radio_color[res.app_status]"
              disabled text-color="black">
            <el-radio-button border label="0">当前可用</el-radio-button>
            <el-radio-button border label="1">当前不可用</el-radio-button>
            <el-radio-button border label="2">暂时不可用</el-radio-button>
          </el-radio-group>
        </el-col>

        <span v-if="res.app_status==='2'">
          <el-col :span="2" :offset="1">
            可用时间:&nbsp;&nbsp;&nbsp;
          </el-col>
          <el-col :span="4">
            <el-date-picker type="date"
                            placeholder="选择日期"
                            v-model="res.available_time1"
                            style="width: 100%;" disabled/>
          </el-col>
          <el-col class="line" :span="2">-</el-col>
          <el-col :span="4">
            <el-time-picker placeholder="选择时间"
                            v-model="res.available_time2"
                            style="width: 100%;" disabled/>
          </el-col>
        </span>
      </el-form-item>
      </template>
    </el-card>

    <el-form-item style="margin-top: 30px">
      <el-button type="success" @click="onOk">可以开始</el-button>
      <el-button type="primary" @click="onWait">继续等待</el-button>
      <el-button type="warning" @click="onUndo">申请撤销</el-button>
    </el-form-item>
  </el-form>

</div>
</template>

<script>
import {get} from "@/utils/http";
import {ElMessage} from "element-plus"

export default {
  name: "applyRes",
  data() {
    return {
      isLoading: true,
      radio_select: null,
      proInfo:null,
      radio_color: ['green', 'red', 'orange']
    }
  },
  created() {
    this.pro_id = this.$route.params.pro_id;
    if (this.pro_id===undefined){
      this.pro_id=sessionStorage.getItem("pro_id");
    }else {
      sessionStorage.setItem("pro_id",this.pro_id)
    }
    this.getData();
  },
  methods: {
    getData(){
      let that = this;
      get("/funcUnit/getInfo",{
        id: this.pro_id
      }).then(function (res) {
        if (res.code===1){
          res = res.data;
          that.proInfo = res;
          that.proInfo.equ_info = JSON.parse(res.equ_info);
          that.proInfo.drug_info = JSON.parse(res.drug_info);
          that.proInfo.animal_info = JSON.parse(res.animal_info);
          that.proInfo.sample_info = JSON.parse(res.sample_info);

          that.isLoading=false;
        }
      })
    },

    onOk(){
      get("/funcUnit/updateState",{
        id: this.proInfo.pro_id,
        state: "申请完成"
      }).then(function (res) {
        if (res.code===1){
          ElMessage.success({
            showClose: true,
            message: "实验数据状态已更新",
            type: "success",
            center: true
          })
        }
        history.back();
      });
    },
    onWait(){
      history.back();
    },
    onUndo(){
      get("/funcUnit/updateState",{
        id: this.proInfo.pro_id,
        state: "暂被撤销"
      }).then(function (res) {
        if (res.code===1){
          ElMessage.success({
            showClose: true,
            message: "实验数据状态已更新",
            type: "success",
            center: true
          })
        }
        history.back();
      });

    }
  }
}
</script>

<style scoped>
.display-card{
  margin-top: 15px;
  margin-bottom: 5px;
}
</style>